<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>布局配置 | vue-next-admin</title>
    
    <meta name="generator" content="VitePress v1.6.3">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/assets/style.Brpq300p.css" as="style">
    <link rel="preload stylesheet" href="/vue-next-admin-doc-preview/vp-icons.css" as="style">
    
    <script type="module" src="/vue-next-admin-doc-preview/assets/app.BSorFS4w.js"></script>
    <link rel="preload" href="/vue-next-admin-doc-preview/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/theme.D_-w8-Et.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/chunks/framework.JQJLXAcz.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_layoutConfig_index.md.y3w-TjAE.lean.js">
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
    <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-e6e9343e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-518ab264></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-518ab264>Skip to content</a><!--]--><!----><header class="VPNav" data-v-e6e9343e data-v-fcd341ad><div class="VPNavBar" data-v-fcd341ad data-v-109f5bed><div class="wrapper" data-v-109f5bed><div class="container" data-v-109f5bed><div class="title" data-v-109f5bed><div class="VPNavBarTitle has-sidebar" data-v-109f5bed data-v-1ce8aa9a><a class="title" href="/vue-next-admin-doc-preview/" data-v-1ce8aa9a><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt data-v-3a7f1e1a><!--]--><span data-v-1ce8aa9a>vue-next-admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-109f5bed><div class="content-body" data-v-109f5bed><!--[--><!--]--><div class="VPNavBarSearch search" data-v-109f5bed><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-109f5bed data-v-1b1a6c0b><span id="main-nav-aria-label" class="visually-hidden" data-v-1b1a6c0b> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/home/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-next-admin-doc-preview/config/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>配置</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>集成后端</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zuohuaijun/Admin.NET" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zuohuaijun Admin.NET</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@熊猫 PandaGoAdmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://toscode.gitee.com/GionConnection/gopro_free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 GoPro平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/GionConnection/niupi-free" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@甜蜜蜜 NiuPi 平台</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/tiger1103/gfast/tree/os-v3/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@游子 GFast-V3</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/diygw/diygw-ui-php/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@diygw.com gw-ui-php</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-net" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-net</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/zsvg/vboot-java" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@zsvg vboot-java</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@青红造了个白 buildadmin</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/xiaodingding/iotfast" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>@Goodwell iotfast(一个开源的物联网平台)</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>演示 & 仓库</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>⛱️ 线上演示</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="http://vuenextadmin.ccfast.cc/" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3.x 版本预览（vue-next-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue2.x 版本预览（vue-prev-admin）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://lyt-top.gitee.io/vue-next-admin-shop-preview" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>vue3 + uni-app 商城（vue-next-admin-shop）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-c7a754f7 data-v-8c65019a><p class="title" data-v-8c65019a>💒 代码仓库</p><!--[--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>gitee（国内：实时更新）</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8c65019a data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>github（国外：定期更新）</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-1b1a6c0b data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-bccf8a2a><span class="text" data-v-bccf8a2a><!----><span data-v-bccf8a2a>日志 & 文档</span><span class="vpi-chevron-down text-icon" data-v-bccf8a2a></span></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><div class="items" data-v-c7a754f7><!--[--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>更新日志</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c7a754f7 data-v-230e2e15><a class="VPLink link vp-external-link-icon" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noreferrer" data-v-230e2e15><!--[--><span data-v-230e2e15>文档仓库</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/support/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>赞助</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-next-admin-doc-preview/shop/" tabindex="0" data-v-1b1a6c0b data-v-c861533d><!--[--><span data-v-c861533d>商城</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-109f5bed data-v-c3b75e45><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-c3b75e45 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-109f5bed data-v-36a09a39 data-v-bccf8a2a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-bccf8a2a><span class="vpi-more-horizontal icon" data-v-bccf8a2a></span></button><div class="menu" data-v-bccf8a2a><div class="VPMenu" data-v-bccf8a2a data-v-c7a754f7><!----><!--[--><!--[--><!----><div class="group" data-v-36a09a39><div class="item appearance" data-v-36a09a39><p class="label" data-v-36a09a39>Appearance</p><div class="appearance-action" data-v-36a09a39><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-36a09a39 data-v-bd8da54f data-v-1587fe0b><span class="check" data-v-1587fe0b><span class="icon" data-v-1587fe0b><!--[--><span class="vpi-sun sun" data-v-bd8da54f></span><span class="vpi-moon moon" data-v-bd8da54f></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-109f5bed data-v-01e8b504><span class="container" data-v-01e8b504><span class="top" data-v-01e8b504></span><span class="middle" data-v-01e8b504></span><span class="bottom" data-v-01e8b504></span></span></button></div></div></div></div><div class="divider" data-v-109f5bed><div class="divider-line" data-v-109f5bed></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-e6e9343e data-v-19ebc9ec><div class="container" data-v-19ebc9ec><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-19ebc9ec><span class="vpi-align-left menu-icon" data-v-19ebc9ec></span><span class="menu-text" data-v-19ebc9ec>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-19ebc9ec data-v-f4d555a5><button data-v-f4d555a5>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-e6e9343e data-v-3048e0f0><div class="curtain" data-v-3048e0f0></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3048e0f0><span class="visually-hidden" id="sidebar-aria-label" data-v-3048e0f0> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible has-active" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>简介</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/menu/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>菜单配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>布局配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/iconfont/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>字体图标</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/server/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>服务端交互</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/vuex/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>vuex</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/build/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>打包预览</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>高级</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/power/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>权限管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/route/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>路由参数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/i18n/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>国际化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tagsView/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>标签页</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/directive/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置指令</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-b5e9a40d><section class="VPSidebarItem level-0 collapsible" data-v-b5e9a40d data-v-708106a4><div class="item" role="button" tabindex="0" data-v-708106a4><div class="indicator" data-v-708106a4></div><h2 class="text" data-v-708106a4>其它</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-708106a4><span class="vpi-chevron-right caret-icon" data-v-708106a4></span></div></div><div class="items" data-v-708106a4><!--[--><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/charts/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>数据可视化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/tool/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>工具类集合</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/partyPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>第三方插件使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/builtPlug/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>内置插件的使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-708106a4 data-v-708106a4><div class="item" data-v-708106a4><div class="indicator" data-v-708106a4></div><a class="VPLink link link" href="/vue-next-admin-doc-preview/config/otherIssues/" data-v-708106a4><!--[--><p class="text" data-v-708106a4>其它问题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-e6e9343e data-v-1b0e1204><div class="VPDoc has-sidebar has-aside" data-v-1b0e1204 data-v-1bc29d7c><!--[--><!--]--><div class="container" data-v-1bc29d7c><div class="aside" data-v-1bc29d7c><div class="aside-curtain" data-v-1bc29d7c></div><div class="aside-container" data-v-1bc29d7c><div class="aside-content" data-v-1bc29d7c><div class="VPDocAside" data-v-1bc29d7c data-v-9a0c0521><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-9a0c0521 data-v-678806e9><div class="content" data-v-678806e9><div class="outline-marker" data-v-678806e9></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-678806e9>导航目录</div><ul class="VPDocOutlineItem root" data-v-678806e9 data-v-4569cf74><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-9a0c0521></div><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><div class="VPSponsors vp-sponsor aside"><!--[--><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid mini"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="http://www.ccflow.org/" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden">驰骋流程+表单+低代码</h4><img class="vp-sponsor-grid-image" src="/vue-next-admin-doc-preview/images/ccflowRightNextAdmin.png" alt="驰骋流程+表单+低代码"></article></a></div><!--]--></div></section><!--]--></div></div><!--]--><!--]--><!--]--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-1bc29d7c><div class="content-container" data-v-1bc29d7c><!--[--><!--]--><main class="main" data-v-1bc29d7c><div style="position:relative;" class="vp-doc _vue-next-admin-doc-preview_config_layoutConfig_" data-v-1bc29d7c><div><h1 id="布局配置" tabindex="-1">布局配置 <a class="header-anchor" href="#布局配置" aria-label="Permalink to &quot;布局配置&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">布局不生效</p><p>清空浏览器永久缓存或者点击 <code>布局配置 -&gt; 一键恢复默认</code>，前提是修改了 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/stores/themeConfig.ts" target="_blank" rel="noreferrer">/src/stores/themeConfig.ts</a> 配置文件内容。添加或者修改功能，请前往 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/navBars/breadcrumb/setings.vue" target="_blank" rel="noreferrer">/@/layout/navBars/breadcrumb/setings.vue</a> 组件位置修改</p></div><h2 id="布局说明" tabindex="-1">布局说明 <a class="header-anchor" href="#布局说明" aria-label="Permalink to &quot;布局说明&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">操作方式</p><p>可视化操作：左上角 <code>icon</code> 图标点击打开布局配置，所有配置功能都在这个里面</p><p>代码操作：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/stores/themeConfig.ts" target="_blank" rel="noreferrer">/src/stores/themeConfig.ts</a></p></div><p>包含：<code>菜单栏</code>、<code>顶栏</code>、<code>tagsView 标签页</code>、<code>主内容区</code>。</p><p>大图查看，鼠标右键：<code>在新标签页中打开图片</code>。</p><div class="img-style-100"><p><img src="https://i.hd-r.cn/7334cd9793eb82b58b916232989b361d.png" alt="https://i.hd-r.cn/7334cd9793eb82b58b916232989b361d.png" data-fancybox="gallery"></p></div><h2 id="全局主题" tabindex="-1">全局主题 <a class="header-anchor" href="#全局主题" aria-label="Permalink to &quot;全局主题&quot;">​</a></h2><h3 id="_1-目录结构" tabindex="-1">1. 目录结构 <a class="header-anchor" href="#_1-目录结构" aria-label="Permalink to &quot;1. 目录结构&quot;">​</a></h3><div class="tip custom-block"><p class="custom-block-title">vue-prev-admin</p><p><a href="https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin/" target="_blank" rel="noreferrer">vue-prev-admin</a> vue2.x 的目录结构也会基于该结构进行修改</p></div><p><a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/theme" target="_blank" rel="noreferrer">/src/theme</a> 下，后期继续补充，样式都会写在这个文件夹下：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (页面样式)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">common</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (基础样式)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── transition.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (页面过渡动画)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	└── var.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (全局主题样式，用于全局改变样式)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (媒体查询)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── chart.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (大数据图表)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── cityLinkage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (Cascader 级联选择器城市选择)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── dialog.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (弹窗)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── error.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">404</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">、401界面)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (表单)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── home.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (首页)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── index.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (媒体查询定义主样式)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── layout.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (框架布局)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── login.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (登录界面)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── media.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (媒体查询主出口)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── pagination.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (分页)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── personal.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (个人中心)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── scrollbar.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (页面滚动条)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	└── tagsView.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (tagsView 标签页)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mixins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (scss混入)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── element</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">mixins.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (定义重置的element plus混入复用样式)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	├── </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">全局主题颜色调用混入函数</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│	└── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mixins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">定义一些常用的全局混入样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	│</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">页面主样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">，</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">用于重置浏览器默认样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">base</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">基础样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">、</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">过渡动画引入等</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">深色主题</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">重置的element</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> plus样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">，</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">用于改变主题</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">iconSelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">图标选择器</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">页面样式主出口</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">loading样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	├── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">other</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">其它样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	└── </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">waves</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">按钮波浪样式</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="_2-scss-部分函数说明" tabindex="-1">2. scss 部分函数说明 <a class="header-anchor" href="#_2-scss-部分函数说明" aria-label="Permalink to &quot;2. scss 部分函数说明&quot;">​</a></h3><p style="font-weight:bold;">一、scss @mixin</p><ul><li>定义：<a href="https://www.sass.hk/docs/" target="_blank" rel="noreferrer">scss 官方中文文档</a>，具体请查阅官方文档。使用方法：</li></ul><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Button 按钮</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">------------------------------- */</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$c1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$c2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">set-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">set-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$c1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">set-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$c2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li>页面中使用，先引入，然后在 <code>css</code> 类中通过 <code>@include</code> 使用</li></ul><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;mixins/element-mixins.scss&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// default</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-button--default:hover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.el-button--default:focus</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(primary, primary</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">light</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">8, primary</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">light</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">6);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p style="font-weight:bold;">二、scss @function</p><ul><li>定义函数</li></ul><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 颜色调用函数</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">------------------------------- */</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> set-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{$key}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li>不理解？请看这个 <code>css3 :root</code> <a href="https://www.runoob.com/cssref/func-var.html" target="_blank" rel="noreferrer">CSS var() 函数</a></li></ul><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 定义一个名为 &quot;--main-bg-color&quot; 的属性，然后使用 var() 函数调用该属性： */</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --main-bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#div1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--main-bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">#div2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--main-bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p style="font-weight:bold;">三、为什么不使用这种写法放进 :root 中？</p><div class="tip custom-block"><p class="custom-block-title">原因</p><p>因为 scss 不支持这种嵌套 <code>mix(var(--color-primary), var(--color-success), 10%)</code>，lighten / darken / saturate / desaturate 等，从而无法用 <code>document.documentElement.style.setProperty(&#39;--color-primary&#39;, &#39;blue&#39;);</code> 改变样式</p></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">	primary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#409eff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">	success</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#67c23a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">	info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#909399</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">	warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#e6a23c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">	danger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f56c6c</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:root {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	@each </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> in </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">		--color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{$key}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{$value}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_3-自定义全局主题" tabindex="-1">3. 自定义全局主题 <a class="header-anchor" href="#_3-自定义全局主题" aria-label="Permalink to &quot;3. 自定义全局主题&quot;">​</a></h3><p style="font-weight:bold;">一、实现方法，以下方法不晓得会不会影响页面渲染性能：</p><ul><li>1、定义全局 :root 初始变量，路径：<code>src/theme/common/var.scss</code></li><li>2、编写覆盖 element plus 的样式：路径：<code>src/theme/element.scss</code></li><li>3、页面通过 <code>document.documentElement.style.setProperty</code> 方法改变 <code>:root</code> 中的值</li></ul><p style="font-weight:bold;">二、具体实现</p><div class="tip custom-block"><p class="custom-block-title">提示</p><p>第 1 第 2 步就不介绍了，直接去路径去看就懂了。接下来我们讲讲第 3 步：</p></div><ul><li>通过 <code>document.documentElement.style.setProperty</code> 改变颜色值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration/setProperty" target="_blank" rel="noreferrer">setProperty 文档</a></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { reactive } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;vue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 定义变量内容</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reactive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  });</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 改变主题颜色</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onColorChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 设置颜色</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    document.documentElement.style.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;--color-primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, state.color);</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 设置颜色变浅</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    document.documentElement.style.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      &quot;--color-primary-light-1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      getLightColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state.color1, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    );</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  };</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ul><li>getLightColor 颜色变浅方法，路径在：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/theme.ts" target="_blank" rel="noreferrer">src/utils/theme.ts</a></li></ul><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 变浅颜色值，level为加深的程度，限0-1之间</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getLightColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">level</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reg </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\#</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">[0-9A-Fa-f]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">{6}$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">reg.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(color)) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ElMessage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;输入错误的hex颜色值&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rgb </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hexToRgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(color);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    rgb[i] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Math.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">floor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">255</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rgb[i]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> level </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rgb[i]);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rgbToHex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(rgb[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], rgb[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], rgb[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li>到此就完成了主题的全局变色了</li></ul><p>tip 还有疑问？总的来说，就是通过重新定义 <code>css</code> 样式，用来覆盖 <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank" rel="noreferrer">element-plus</a> 默认的样式，从而实现全局主题变色。其它方法实现全局主题，请自行 <a href="https://www.baidu.com/" target="_blank" rel="noreferrer">百度一下：https://www.baidu.com/</a></p><h3 id="_4-框架中实现例子" tabindex="-1">4. 框架中实现例子 <a class="header-anchor" href="#_4-框架中实现例子" aria-label="Permalink to &quot;4. 框架中实现例子&quot;">​</a></h3><p style="font-weight:bold;">一、全局主题改变时</p><ul><li>主题改变时，会调用 <code>onColorPickerChange</code> 方法进行重新的覆盖 css <code>:root</code> 定义的变量的值</li></ul><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onColorPickerChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  document.documentElement.style.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setProperty</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    color,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    getThemeConfig.value[color]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  );</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><ul><li>拿到的值会赋值给根节点上 <code>html</code>，<code>document.documentElement.style</code>。刷新的时再设置 <code>document.documentElement.style.cssText = Local.get(&#39;themeConfigStyle&#39;);</code>，防止数据丢失</li></ul><div class="img-style-100"><p><img src="https://i.hd-r.cn/a3a3534aebcd493686f71631332493c5.png" alt="https://i.hd-r.cn/a3a3534aebcd493686f71631332493c5.png" data-fancybox="gallery"></p></div><p style="font-weight:bold;">二、更改主题配置文件路径</p><p>修改后不生效，请注意看下列文件顶部文字注释。</p><p><a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/stores/themeConfig.ts" target="_blank" rel="noreferrer">vue3.x：/src/stores/themeConfig.ts</a>，</p><p><a href="https://gitee.com/lyt-top/vue-next-admin/blob/vue-prev-admin/src/store/modules/themeConfig.js" target="_blank" rel="noreferrer">vue2.x：/src/store/modules/themeConfig.js</a></p><div class="tip custom-block"><p class="custom-block-title">修改配置时：</p><p>1、需要每次都清理 <code>window.localStorage</code> 浏览器永久缓存</p><p>2、或者点击布局配置最底部 <code>一键恢复默认</code> 按钮即可看到效果</p></div><h2 id="菜单-顶栏" tabindex="-1">菜单 / 顶栏 <a class="header-anchor" href="#菜单-顶栏" aria-label="Permalink to &quot;菜单 / 顶栏&quot;">​</a></h2><h3 id="_1-顶栏" tabindex="-1">1. 顶栏 <a class="header-anchor" href="#_1-顶栏" aria-label="Permalink to &quot;1. 顶栏&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navBars/breadcrumb" target="_blank" rel="noreferrer">/@/layout/navBars/breadcrumb</a></p><p style="font-weight:bold;">一、顶栏背景、顶栏默认字体颜色、顶栏背景渐变</p><p>功能说明：<code>设置顶栏的背景颜色、字体颜色、背景渐变</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/6efa9498cddb49738ea9d59114185e10.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/6efa9498cddb49738ea9d59114185e10.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/6efa9498cddb49738ea9d59114185e10.gif" data-fancybox="gallery"></p></div></a><h3 id="_2-菜单" tabindex="-1">2. 菜单 <a class="header-anchor" href="#_2-菜单" aria-label="Permalink to &quot;2. 菜单&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navMenu" target="_blank" rel="noreferrer">/@/layout/navMenu</a></p><p style="font-weight:bold;">一、菜单背景、菜单默认字体颜色、菜单背景渐变、菜单字体背景高亮</p><p>功能说明：<code>设置菜单的背景颜色、字体颜色、背景渐变、字体高亮背景色（颜色跟随全局主题(primary)）</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/8df792f8a8004a6d804f5d49775e21bb.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/8df792f8a8004a6d804f5d49775e21bb.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/8df792f8a8004a6d804f5d49775e21bb.gif" data-fancybox="gallery"></p></div></a><h3 id="_3-分栏" tabindex="-1">3. 分栏 <a class="header-anchor" href="#_3-分栏" aria-label="Permalink to &quot;3. 分栏&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/component/columnsAside.vue" target="_blank" rel="noreferrer">/@/layout/component/columnsAside.vue</a></p><p style="font-weight:bold;">一、分栏菜单背景、分栏菜单默认字体颜色、分栏菜单背景渐变</p><p>功能说明：<code>设置分栏菜单的背景颜色、字体颜色、背景渐变</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/9dc53c3088164e5d9760eb0b08b38524.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/9dc53c3088164e5d9760eb0b08b38524.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/9dc53c3088164e5d9760eb0b08b38524.gif" data-fancybox="gallery"></p></div></a><h2 id="界面设置" tabindex="-1">界面设置 <a class="header-anchor" href="#界面设置" aria-label="Permalink to &quot;界面设置&quot;">​</a></h2><h3 id="_1-菜单设置" tabindex="-1">1. 菜单设置 <a class="header-anchor" href="#_1-菜单设置" aria-label="Permalink to &quot;1. 菜单设置&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navMenu" target="_blank" rel="noreferrer">/@/layout/navMenu</a></p><p style="font-weight:bold;">一、菜单水平折叠、菜单手风琴、经典布局分割菜单</p><p>功能说明：<code>菜单水平折叠、手风琴（开启一个展开）、经典布局分割菜单（顶级在顶栏处，子级在菜单栏）</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/a186682d39a54748b1efa4660a821d2d.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/a186682d39a54748b1efa4660a821d2d.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/a186682d39a54748b1efa4660a821d2d.gif" data-fancybox="gallery"></p></div></a><h3 id="_2-固定-header" tabindex="-1">2. 固定 Header <a class="header-anchor" href="#_2-固定-header" aria-label="Permalink to &quot;2. 固定 Header&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/main" target="_blank" rel="noreferrer">/@/layout/main</a></p><p style="font-weight:bold;">一、固定 Header</p><p>功能说明：<code>固定 Header（主内容区滚动，顶栏不跟随滚动）</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/ff1c08f33cea4a4897e1fd702de7f549.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/ff1c08f33cea4a4897e1fd702de7f549.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/ff1c08f33cea4a4897e1fd702de7f549.gif" data-fancybox="gallery"></p></div></a><h3 id="_3-锁屏" tabindex="-1">3. 锁屏 <a class="header-anchor" href="#_3-锁屏" aria-label="Permalink to &quot;3. 锁屏&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/lockScreen" target="_blank" rel="noreferrer">/@/layout/lockScreen</a></p><p style="font-weight:bold;">一、开启锁屏、自动锁屏(s/秒)</p><p>功能说明：<code>开启锁屏（类似于电脑屏保）、自动锁屏(s/秒)</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/4e1a05bffcd44ac6b5bd71272f39fe04.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/4e1a05bffcd44ac6b5bd71272f39fe04.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/4e1a05bffcd44ac6b5bd71272f39fe04.gif" data-fancybox="gallery"></p></div></a><h2 id="界面显示" tabindex="-1">界面显示 <a class="header-anchor" href="#界面显示" aria-label="Permalink to &quot;界面显示&quot;">​</a></h2><h3 id="_1-侧边栏-logo" tabindex="-1">1. 侧边栏 Logo <a class="header-anchor" href="#_1-侧边栏-logo" aria-label="Permalink to &quot;1. 侧边栏 Logo&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/logo" target="_blank" rel="noreferrer">/@/layout/logo</a></p><p style="font-weight:bold;">一、侧边栏 Logo</p><p>功能说明：<code>显示/隐藏侧边栏 Logo</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/33ea0e305dcc4f228a47f4bc6c39ad80.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/33ea0e305dcc4f228a47f4bc6c39ad80.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/33ea0e305dcc4f228a47f4bc6c39ad80.gif" data-fancybox="gallery"></p></div></a><h3 id="_2-breadcrumb-面包屑" tabindex="-1">2. Breadcrumb 面包屑 <a class="header-anchor" href="#_2-breadcrumb-面包屑" aria-label="Permalink to &quot;2. Breadcrumb 面包屑&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/navBars/breadcrumb/breadcrumb.vue" target="_blank" rel="noreferrer">/@/layout/navBars/Breadcrumb/breadcrumb.vue</a></p><p style="font-weight:bold;">一、开启 Breadcrumb、开启 Breadcrumb 图标</p><p>功能说明：<code>开启 Breadcrumb、Breadcrumb 图标</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/67df8ad8c6e641de94545aad586add9c.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/67df8ad8c6e641de94545aad586add9c.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/67df8ad8c6e641de94545aad586add9c.gif" data-fancybox="gallery"></p></div></a><h3 id="_3-tagsview-标签页" tabindex="-1">3. Tagsview 标签页 <a class="header-anchor" href="#_3-tagsview-标签页" aria-label="Permalink to &quot;3. Tagsview 标签页&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navBars/tagsView" target="_blank" rel="noreferrer">/@/layout/navBars/tagsView</a></p><p style="font-weight:bold;">一、开启 Tagsview、开启 Tagsview 图标、开启 TagsView 缓存、开启 TagsView 拖拽、开启 TagsView 共用</p><p>功能说明：<code>开启 Tagsview、Tagsview 图标、TagsView 缓存、TagsView 拖拽、TagsView 共用（共用详情界面：tagsView只会出现一个；非共用详情界面：tagsView会出现多个）</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/d760ab8798ac428593760226e870879f.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/d760ab8798ac428593760226e870879f.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/d760ab8798ac428593760226e870879f.gif" data-fancybox="gallery"></p></div></a><h3 id="_4-footer-版权" tabindex="-1">4. Footer 版权 <a class="header-anchor" href="#_4-footer-版权" aria-label="Permalink to &quot;4. Footer 版权&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/footer" target="_blank" rel="noreferrer">/@/layout/footer</a></p><p style="font-weight:bold;">一、开启 Footer 版权</p><p>功能说明：<code>显示/隐藏底部版权</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/c1ca33ebf6e64ad3baba268235f348f3.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/c1ca33ebf6e64ad3baba268235f348f3.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/c1ca33ebf6e64ad3baba268235f348f3.gif" data-fancybox="gallery"></p></div></a><h3 id="_5-颜色模式" tabindex="-1">5. 颜色模式 <a class="header-anchor" href="#_5-颜色模式" aria-label="Permalink to &quot;5. 颜色模式&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/navBars/breadcrumb/setings.vue" target="_blank" rel="noreferrer">/@/layout/navBars/breadcrumb/setings.vue</a></p><p style="font-weight:bold;">一、灰色模式、色弱模式、深色模式</p><p>功能说明：<code>开启灰色模式、色弱模式、深色模式</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/856f60ae98074f4e8c57c3fad16a8d94.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/856f60ae98074f4e8c57c3fad16a8d94.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/856f60ae98074f4e8c57c3fad16a8d94.gif" data-fancybox="gallery"></p></div></a><h3 id="_6-水印" tabindex="-1">6. 水印 <a class="header-anchor" href="#_6-水印" aria-label="Permalink to &quot;6. 水印&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/watermark.ts" target="_blank" rel="noreferrer">/@/utils/wartermark.ts</a></p><p style="font-weight:bold;">一、开启水印、水印文案</p><p>功能说明：<code>开启开启水印、设置水印文案</code></p><p style="font-weight:bold;">二、效果图</p><a href="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/19e0ced20c2d495599b69f09227f690b.gif" target="_black"><div class="img-style-100"><p><img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/19e0ced20c2d495599b69f09227f690b.gif" alt="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/docs/layout/19e0ced20c2d495599b69f09227f690b.gif" data-fancybox="gallery"></p></div></a><h2 id="其它设置" tabindex="-1">其它设置 <a class="header-anchor" href="#其它设置" aria-label="Permalink to &quot;其它设置&quot;">​</a></h2><div class="tip custom-block"><p class="custom-block-title">定位查看 css 样式</p><p>可使用 el-option 的 <code>value</code> 值去对应的 <code>文件路径</code> 里搜索查看</p></div><h3 id="_1-tagsview-风格" tabindex="-1">1. Tagsview 风格 <a class="header-anchor" href="#_1-tagsview-风格" aria-label="Permalink to &quot;1. Tagsview 风格&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/tree/master/src/layout/navBars/tagsView" target="_blank" rel="noreferrer">/@/layout/navBars/tagsView</a></p><p>需注意 <code>value</code> 值需与定义的 <code>css 类名</code> 一致</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getThemeConfig.tagsStyle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;风格1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tags-style-one&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;风格2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tags-style-two&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;风格3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tags-style-three&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;风格4&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tags-style-four&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 新增的风格 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;风格xx&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tags-style-xxx&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 继续添加 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-主页面切换动画" tabindex="-1">2. 主页面切换动画 <a class="header-anchor" href="#_2-主页面切换动画" aria-label="Permalink to &quot;2. 主页面切换动画&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/theme/common/transition.scss" target="_blank" rel="noreferrer">/@/theme/common/transition.scss</a>，内置 <code>slide-right</code>、<code>slide-left</code>、<code>opacitys</code> 切换风格。</p><p>你可能需要了解 <a href="https://v3.cn.vuejs.org/guide/transitions-enterleave.html" target="_blank" rel="noreferrer">进入过渡 &amp; 离开过渡</a>。新增动画时，需要在 <a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/navBars/breadcrumb/setings.vue" target="_blank" rel="noreferrer">/@/layout/navBars/breadcrumb/setings.vue</a> 其它设置中添加如下：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getThemeConfig.animation&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide-right&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide-right&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide-left&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;slide-left&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;opacitys&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;opacitys&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 新增的动画名 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;xxx&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;xxx&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 继续添加 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_3-分栏高亮风格" tabindex="-1">3. 分栏高亮风格 <a class="header-anchor" href="#_3-分栏高亮风格" aria-label="Permalink to &quot;3. 分栏高亮风格&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/component/columnsAside.vue" target="_blank" rel="noreferrer">/@/layout/component/columnsAside.vue</a>。</p><p>需注意 <code>value</code> 值需与定义的 <code>css 类名</code> 一致</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getThemeConfig.columnsAsideStyle&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;圆角&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns-round&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;卡片&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns-card&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 新增的高亮风格 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;xxx&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;xxx&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 继续添加 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_4-分栏布局风格" tabindex="-1">4. 分栏布局风格 <a class="header-anchor" href="#_4-分栏布局风格" aria-label="Permalink to &quot;4. 分栏布局风格&quot;">​</a></h3><p>文件路径：<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/src/layout/component/columnsAside.vue" target="_blank" rel="noreferrer">/@/layout/component/columnsAside.vue</a>。</p><p>需注意 <code>value</code> 值需与定义的 <code>css 类名</code> 一致</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;getThemeConfig.columnsAsideLayout&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;水平&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns-horizontal&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;垂直&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns-vertical&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 新增的分栏布局风格 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;xxx&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;xxx&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-option</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 继续添加 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="布局切换" tabindex="-1">布局切换 <a class="header-anchor" href="#布局切换" aria-label="Permalink to &quot;布局切换&quot;">​</a></h2><p>此项目包含四个布局：默认、经典、横向、分栏。</p><p>查看大图，鼠标右键：<code>在新标签页中打开图片</code></p><div class="img-style"><p><img src="https://i.hd-r.cn/f6c87ee0b5ad2567a7166762efa61633.png" alt="https://i.hd-r.cn/f6c87ee0b5ad2567a7166762efa61633.png" data-fancybox="gallery"></p></div><div class="img-style"><p><img src="https://i.hd-r.cn/10763d37a5ef087cdd62122c7ec4b622.png" alt="https://i.hd-r.cn/10763d37a5ef087cdd62122c7ec4b622.png" data-fancybox="gallery"></p></div><div class="img-style"><p><img src="https://i.hd-r.cn/be587be203e9fdb06dc1208f20268d9f.png" alt="https://i.hd-r.cn/be587be203e9fdb06dc1208f20268d9f.png" data-fancybox="gallery"></p></div><div class="img-style"><p><img src="https://i.hd-r.cn/47b00d7daec564ee34ef3032519492b2.png" alt="https://i.hd-r.cn/47b00d7daec564ee34ef3032519492b2.png" data-fancybox="gallery"></p></div></div></div></main><footer class="VPDocFooter" data-v-1bc29d7c data-v-7922fe7a><!--[--><!--]--><div class="edit-info" data-v-7922fe7a><div class="edit-link" data-v-7922fe7a><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/config/layoutConfig/index.md" target="_blank" rel="noreferrer" data-v-7922fe7a><!--[--><span class="vpi-square-pen edit-link-icon" data-v-7922fe7a></span> 欢迎到 Gitee 上编辑此页<!--]--></a></div><div class="last-updated" data-v-7922fe7a><p class="VPLastUpdated" data-v-7922fe7a data-v-f919ac01>上次更新: <time datetime="2023-03-27T07:54:21.000Z" data-v-f919ac01></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-7922fe7a><span class="visually-hidden" id="doc-footer-aria-label" data-v-7922fe7a>Pager</span><div class="pager" data-v-7922fe7a><a class="VPLink link pager-link prev" href="/vue-next-admin-doc-preview/config/menu/" data-v-7922fe7a><!--[--><span class="desc" data-v-7922fe7a>上一页</span><span class="title" data-v-7922fe7a>菜单配置</span><!--]--></a></div><div class="pager" data-v-7922fe7a><a class="VPLink link pager-link next" href="/vue-next-admin-doc-preview/config/iconfont/" data-v-7922fe7a><!--[--><span class="desc" data-v-7922fe7a>下一页</span><span class="title" data-v-7922fe7a>字体图标</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-e6e9343e data-v-d3e003fa><div class="container" data-v-d3e003fa><p class="message" data-v-d3e003fa>根据 MIT 许可证发布</p><p class="copyright" data-v-d3e003fa>本文档内容版权为 vue-next-admin 作者所有，保留所有权利。</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"config_build_index.md\":\"D66wEP1j\",\"config_builtplug_index.md\":\"D2vmqGsI\",\"config_charts_index.md\":\"AKJZmCTu\",\"config_directive_index.md\":\"BknO8zbE\",\"config_i18n_index.md\":\"CEUZIFAO\",\"config_iconfont_index.md\":\"CwSwNiIL\",\"config_index.md\":\"BWWh4uPI\",\"config_layoutconfig_index.md\":\"y3w-TjAE\",\"config_menu_index.md\":\"3wChSrOV\",\"config_otherissues_index.md\":\"BOPxKpRj\",\"config_partyplug_index.md\":\"C8yqZf2d\",\"config_power_index.md\":\"Ck6Qtvrt\",\"config_route_index.md\":\"Bh5Jr5_u\",\"config_server_index.md\":\"BlrltGMx\",\"config_tagsview_index.md\":\"T-3O6iEI\",\"config_tool_index.md\":\"BD422M9a\",\"config_vuex_index.md\":\"BlaPjLAQ\",\"home_compatible_index.md\":\"3OXuA7v8\",\"home_doc_index.md\":\"C45XHwz0\",\"home_eslint_index.md\":\"DaE-VgkK\",\"home_fast_index.md\":\"Cvjlg4iK\",\"home_forpeople_index.md\":\"FmtZKjE-\",\"home_gitpush_index.md\":\"4PZJWbVF\",\"home_index.md\":\"5dmU-wlV\",\"home_install_index.md\":\"B0F5JJzW\",\"home_introduce_index.md\":\"CXcs-Z1z\",\"home_prettier_index.md\":\"Cv6odTsh\",\"home_thank_index.md\":\"B-DzVr5x\",\"home_vscode_index.md\":\"Bowdae-M\",\"index.md\":\"B79oanHt\",\"shop_index.md\":\"PQuQh6BV\",\"support_index.md\":\"C3lVrH0L\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"vue-next-admin\",\"description\":\"🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档\",\"base\":\"/vue-next-admin-doc-preview/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/images/logo-mini.svg\",\"search\":{\"provider\":\"local\"},\"outlineTitle\":\"导航目录\",\"outline\":\"deep\",\"lastUpdatedText\":\"上次更新\",\"editLink\":{\"pattern\":\"https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/docs/:path\",\"text\":\"欢迎到 Gitee 上编辑此页\"},\"author\":\"lyt_20201208\",\"footer\":{\"message\":\"根据 MIT 许可证发布\",\"copyright\":\"本文档内容版权为 vue-next-admin 作者所有，保留所有权利。\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"指南\",\"link\":\"/home/\",\"activeMatch\":\"/home/\"},{\"text\":\"配置\",\"link\":\"/config/\",\"activeMatch\":\"/config/\"},{\"text\":\"集成后端\",\"items\":[{\"text\":\"@zuohuaijun Admin.NET\",\"link\":\"https://gitee.com/zuohuaijun/Admin.NET\"},{\"text\":\"@熊猫 PandaGoAdmin\",\"link\":\"https://github.com/PandaGoAdmin/PandaX\"},{\"text\":\"@甜蜜蜜 GoPro平台\",\"link\":\"https://toscode.gitee.com/GionConnection/gopro_free\"},{\"text\":\"@甜蜜蜜 NiuPi 平台\",\"link\":\"https://gitee.com/GionConnection/niupi-free\"},{\"text\":\"@游子 GFast-V3\",\"link\":\"https://gitee.com/tiger1103/gfast/tree/os-v3/\"},{\"text\":\"@diygw.com gw-ui-php\",\"link\":\"https://gitee.com/diygw/diygw-ui-php/\"},{\"text\":\"@zsvg vboot-net\",\"link\":\"https://gitee.com/zsvg/vboot-net\"},{\"text\":\"@zsvg vboot-java\",\"link\":\"https://gitee.com/zsvg/vboot-java\"},{\"text\":\"@青红造了个白 buildadmin\",\"link\":\"https://gitee.com/wonderful-code/buildadmin\"},{\"text\":\"@Goodwell iotfast(一个开源的物联网平台)\",\"link\":\"https://github.com/xiaodingding/iotfast\"}]},{\"text\":\"演示 & 仓库\",\"items\":[{\"text\":\"⛱️ 线上演示\",\"items\":[{\"text\":\"vue3.x 版本预览（vue-next-admin）\",\"link\":\"http://vuenextadmin.ccfast.cc/\"},{\"text\":\"vue2.x 版本预览（vue-prev-admin）\",\"link\":\"https://lyt-top.gitee.io/vue-prev-admin-preview/#/login\"},{\"text\":\"vue3 + uni-app 商城（vue-next-admin-shop）\",\"link\":\"https://lyt-top.gitee.io/vue-next-admin-shop-preview\"}]},{\"text\":\"💒 代码仓库\",\"items\":[{\"text\":\"gitee（国内：实时更新）\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin\"},{\"text\":\"github（国外：定期更新）\",\"link\":\"https://github.com/lyt-Top/vue-next-admin\"}]}]},{\"text\":\"日志 & 文档\",\"items\":[{\"text\":\"更新日志\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md\"},{\"text\":\"文档仓库\",\"link\":\"https://gitee.com/lyt-top/vue-next-admin-doc\"}]},{\"text\":\"赞助\",\"link\":\"/support/\",\"activeMatch\":\"/support/\"},{\"text\":\"商城\",\"link\":\"/shop/\",\"activeMatch\":\"/shop/\"}],\"sidebar\":{\"/home/\":[{\"text\":\"入门须知\",\"collapsed\":false,\"items\":[{\"text\":\"许可\",\"link\":\"/home/\"},{\"text\":\"兼容性\",\"link\":\"/home/compatible/\"},{\"text\":\"适用人群\",\"link\":\"/home/forPeople/\"},{\"text\":\"学习文档\",\"link\":\"/home/doc/\"},{\"text\":\"特别鸣谢\",\"link\":\"/home/thank/\"}]},{\"text\":\"开发指南\",\"collapsed\":false,\"items\":[{\"text\":\"介绍\",\"link\":\"/home/introduce/\"},{\"text\":\"安装\",\"link\":\"/home/install/\"},{\"text\":\"其它\",\"link\":\"/home/fast/\"}]},{\"text\":\"代码规范\",\"collapsed\":false,\"items\":[{\"text\":\"eslint\",\"link\":\"/home/eslint/\"},{\"text\":\"prettier\",\"link\":\"/home/prettier/\"},{\"text\":\"vsCode 配置\",\"link\":\"/home/vscode/\"},{\"text\":\"git 提交规范\",\"link\":\"/home/gitPush/\"}]}],\"/config/\":[{\"text\":\"基础\",\"collapsed\":false,\"items\":[{\"text\":\"简介\",\"link\":\"/config/\"},{\"text\":\"菜单配置\",\"link\":\"/config/menu/\"},{\"text\":\"布局配置\",\"link\":\"/config/layoutConfig/\"},{\"text\":\"字体图标\",\"link\":\"/config/iconfont/\"},{\"text\":\"服务端交互\",\"link\":\"/config/server/\"},{\"text\":\"vuex\",\"link\":\"/config/vuex/\"},{\"text\":\"打包预览\",\"link\":\"/config/build/\"}]},{\"text\":\"高级\",\"collapsed\":false,\"items\":[{\"text\":\"权限管理\",\"link\":\"/config/power/\"},{\"text\":\"路由参数\",\"link\":\"/config/route/\"},{\"text\":\"国际化\",\"link\":\"/config/i18n/\"},{\"text\":\"标签页\",\"link\":\"/config/tagsView/\"},{\"text\":\"内置指令\",\"link\":\"/config/directive/\"}]},{\"text\":\"其它\",\"collapsed\":false,\"items\":[{\"text\":\"数据可视化\",\"link\":\"/config/charts/\"},{\"text\":\"工具类集合\",\"link\":\"/config/tool/\"},{\"text\":\"第三方插件使用\",\"link\":\"/config/partyPlug/\"},{\"text\":\"内置插件的使用\",\"link\":\"/config/builtPlug/\"},{\"text\":\"其它问题\",\"link\":\"/config/otherIssues/\"}]}],\"/shop/\":[{\"text\":\"首页\",\"collapsed\":false},{\"text\":\"分类\",\"collapsed\":false},{\"text\":\"服务\",\"collapsed\":false},{\"text\":\"购物车\",\"collapsed\":false},{\"text\":\"我的\",\"collapsed\":false}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>